<template>
    <section class="global-layout">
        <slot name="notice">
            <global-notice></global-notice>
        </slot>
        <el-container class="flex-1">
            <el-aside width="210px">
                <div class="logo">
                    <span><img width="18px" height="18px" src="@/assets/img/icon_logo.png" alt="logo"></span>
                    <span style="padding-left: 5px;" class="pointer">Vue App</span>
                </div>
                <div class="flex-1"><slot name="aside"></slot></div>
            </el-aside>
            <el-container class="flex-1 flex-col">
                <el-header>
                    <div class="flex-1"><slot name="sub-header"></slot></div>
                    <el-dropdown v-if="appUser.userName" trigger="click" style="margin-left: 15px;">
                        <span class="el-dropdown-link" style="cursor:pointer;">
                            {{ appUser.userName }}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="$store.dispatch('logout')">注销登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main style="background: #f6f6f6;padding: 15px;">
                    <slot name="main"></slot>
                    <global-footer></global-footer>
                </el-main>
            </el-container>
        </el-container>
    </section>
</template>
<script>
export default {
    name: 'global-layout',
    computed: {
        appUser() {
            return this.$store.getters['appUser'];
        }
    }
};
</script>
<style lang="postcss" scoped>
.global-layout {
    width: 100vw;
    height: 100vh;
    min-width: 1200px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}
.el-aside {
    z-index: 2;
    background: #303642;
    .logo {
        height: 46px;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        display: flex;
        padding: 0 15px;
        justify-content: flex-start;
        align-items: center;
    }
}
.el-header {
    height: 46px !important;
    background-color: #fff;
    font-size: 18px;
    z-index: 1;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f6f6f6;
    box-shadow: 0px 0px 15px 0px #d0d0d0;
    .sub-header {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}
</style>
